import React, { Component, PureComponent } from 'react';
import Modal from '../../../components/Modal'
import logo from '../../../assets/images/1.png'
class Index extends Component {
  state = {
    visible: false, 
    count: 1
  }

  closeModal = () => {
    this.setState({ visible: false })
  }
  okModal = () => {
    this.setState({ visible: false })
  }
  render() {
    console.log(111111);
    const { visible, count } = this.state
    return (
      <div>
        <button onClick={ () => this.setState({ visible: true }) }>打开弹框</button>
        <Modal visible={ visible } closeModel={ this.closeModal } okModel={ this.okModal }>
          <img src={ logo } alt="" style={ { margin: 'auto' } }/>
        </Modal>

        <h1>{ count }</h1>
        <button onClick={ () => this.setState({ count: 1 }) }>设置</button>
      </div>
    );
  }
  // 性能优化
  shouldComponentUpdate(nextProps, nextState) {
    if(nextState.count !== this.state.count) {
      return true
    }
    if(nextState.visible !== this.state.visible) {
      return true
    }


    return false
  }
}

export default Index;
